<template>
  <div class="vote">
    <div class="_search">
      <div class="block">
        <!-- 日期 -->
        <el-date-picker v-model="date" type="date" placeholder="发布日期" />
        <!-- 状态 -->
        <el-select v-model="state" class="m-1" placeholder="状态">
          <el-option
            v-for="item in options_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- 搜索框 -->
        <div class="demo-input-suffix">
          <el-row :gutter="20">
            <el-input
              v-model="input1"
              class="w-50 m-2"
              placeholder="请输入标题或者发布者 "
              :prefix-icon="Search"
            />
          </el-row>
        </div>

        <el-button type="primary">查询</el-button>
        <el-button plain @click="reset()">重置</el-button>
        <el-button plain @click="reset()">发布投票</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="voteList" stripe style="width: 100%">
        <el-table-column prop="num" label="序号" width="100" />
        <el-table-column prop="title" label="标题" width="300" />
        <el-table-column prop="state" label="状态" />
        <el-table-column prop="leavetime" label="参与对象" />
        <el-table-column prop="leavereason" label="发布者" />
        <el-table-column prop="time" label="发布时间" />
        <el-table-column prop="name" label="操作">
          <el-button link type="primary" size="small">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!-- 表格 -->
</template>

<script  setup>
import { ref, onMounted } from "vue";
import { vote_list } from "../../../utils/api";
import { Calendar, Search } from "@element-plus/icons-vue";
const input1 = ref("");
const date = ref(""); //时间
const state = ref(""); //状态
const voteList = ref([
  {
    id: "",
    title: "",
    state: "",
    time: "",
    operation: "删除",
  },
]);
onMounted(() => {
  // 获取投票列表
  vote_list().then((res) => {
    voteList.value = res.data.votelist;
    console.log(voteList.value);
  });
});

// 状态
const options_type = [
  {
    value: "Option1",
    label: "已结束",
  },
  {
    value: "Option2",
    label: "进行中",
  },
];
// 重置
var reset = () => {};

const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};

// 列表
</script>


<style scoped>
._search {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
}
._search .block {
  box-shadow: inset;
  padding: 30px 0;
  text-align: center;
}
.demo-input-suffix {
  width: 300px;
  display: inline-block;
  margin: 0 50px;
}
</style>
